<template>
  <div class="navbar">
    <div class="weatherleft">
      <div class="weatherImage" :style="{ backgroundImage: `url(${weatherIcon})` }"></div>
      <div class="description">{{ weatherCondition.desc }}</div>
      <div class="degree">{{ weatherCondition.value }}℃</div>
      <div class="place">上海</div>
    </div>
    <div class="timeright">
      <div class="time">{{ date.slice(0, 8) }}</div>
      <div class="date">{{ date.slice(8) }}</div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { Http } from '@/http/index'
import { formatTime } from '@/utils/index'

let date = ref('2023-06-06 12:15:45')
let weatherIcon = ref(new URL('@/assets/images/global/weather_cloudy.png', import.meta.url).href)
let weatherCondition = ref({ value: 26, desc: '雪' })
let timeInterval = null
onMounted(() => {
  timeInterval = setInterval(() => {
    date.value = formatTime('', 'lxm')
  }, 1000)
  initData()
})
const initData = async () => {
  let data = await Http.getWeather()
  const { lives } = data
  weatherCondition.value = { value: lives[0].temperature, desc: lives[0].weather }
  if (lives[0].weather.indexOf('雨') != -1) {
    weatherIcon.value = new URL(
      '@/assets/images/global/weather_heavyrain.png',
      import.meta.url
    ).href
  } else if (lives[0].weather.indexOf('云') != -1) {
    weatherIcon.value = new URL('@/assets/images/global/weather_cloudy.png', import.meta.url).href
  } else if (lives[0].weather.indexOf('阴') != -1) {
    weatherIcon.value = new URL('@/assets/images/global/weather_cloudy.png', import.meta.url).href
  } else if (lives[0].weather.indexOf('雪') != -1) {
    weatherIcon.value = new URL(
      '@/assets/images/global/weather_heavyrain.png',
      import.meta.url
    ).href
  } else {
    weatherIcon.value = new URL('@/assets/images/global/weather_sunny.png', import.meta.url).href
  }
}
onBeforeUnmount(() => {
  clearInterval(timeInterval)
  timeInterval = null
})
</script>
<style lang="scss" scoped>
.navbar {
  width: 3840px;
  height: 207px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  background: url('@/assets/images/global/header.png') no-repeat;
  background-size: 100% 100%;
  transform: translateY(-36px);
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  .timeright {
    font-family: bfs;
    font-weight: 400;
    display: flex;
    padding: 78px 130px 0 0;
    align-items: center;
    height: 40px;
    .time {
      font-size: 48px;
      color: #eaf2ff;
      margin-right: 50px;
    }
    .date {
      position: relative;
      font-size: 31px;
      color: #2274ff;
      &::before {
        content: '';
        position: absolute;
        width: 10px;
        height: 40px;
        background: url('@/assets/images/global/timeleft.png') no-repeat;
        background-size: 100% 100%;
        left: -15px;
        top: 3px;
      }
      &::after {
        content: '';
        position: absolute;
        width: 10px;
        height: 40px;
        background: url('@/assets/images/global/timeright.png') no-repeat;
        background-size: 100% 100%;
        right: -18px;
        top: 3px;
      }
    }
  }
  .weatherleft {
    display: flex;
    padding: 78px 0 0 130px;
    font-size: 26px;
    font-family: shsc;
    color: #64b9fc;
    align-items: center;
    height: 40px;
    .weatherImage {
      width: 30px;
      height: 30px;
      background-size: 100% 100%;
    }
    .description {
      margin-left: 10px;
      margin-right: 20px;
    }
    .place {
      margin-left: 20px;
    }
  }
}
</style>
